<template>
    <div class="box_cont flex_column_between">
        <div class="tit_cont cur">
            <i class="el-icon-arrow-left" @click="backFn"></i>
            <span class="mytext">休息时间申请 </span>
        </div>
        <div class="tab_cont flex_center">
            <div class="tab_item cur" :class="activeName==0?'stetus':''" @click="handleClick('0')">申请记录</div>
            <div class="tab_item cur" :class="activeName==1?'stetus':''" @click="handleClick('1')">提交申请</div>
        </div>
        <template v-if="activeName == 0" >
            <list></list>
        </template>
        <template v-else>
            <applyForm></applyForm>
        </template>
    </div>
</template>

<script>
import list from './components/list.vue'
import applyForm from './components/applyForm.vue'
import bear_content from '@/views/components/bear_content.vue'

export default {
    components:{
        list,
        applyForm,
        bear_content
    },
    data() {
        return {
            activeName:'0',
            current: 1, // 当前页
            pageSize: 5, // 每页条数
            total: 0, // 总条数
            value1:'',
            value:'',
            options:[]
        }
    },
    methods:{
        backFn(){
            this.$router.back()
        },
        handleCurrentChange(){

        },
        handleClick(e){
            this.activeName=e
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

    .box_cont{
        // padding: 3.4rem 3.2rem;
        padding: 2rem;
        .tit_cont{
            width: 100%;
            text-align: left;
            margin-bottom: 4.0rem;
            font-size: 2.4rem;
            .mytext{
                margin-left: 1.6rem;
            }
        }
        .tab_cont{
            width: 100%;
            text-align: left;
            margin-bottom: 4.0rem;
            .tab_item{
                font-size: 2.0rem;
                position: relative;
                padding:0 0 1.6rem 0;
                margin-right: 6.4rem;
                color: #626780;
                border-bottom: .2rem solid transparent;

            }
            .tab_item:hover {
                border-bottom: .2rem solid #019E69;
            }
            .stetus{
                border-bottom: .2rem solid #019E69;
                color: #1A1A1A;
            }
        }
    }
</style>
